<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>手风琴案例</title>

    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      img {
        display: block;
      }

      ul {
        list-style: none;
      }

      .king {
        width: 852px;
        margin: 100px auto;
        background: url(images/bg.png) no-repeat;
        overflow: hidden;
        padding: 10px;
      }

      .king ul {
        overflow: hidden;
      }

      .king li {
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin-right: 10px;
      }

      .king li.current {
        width: 224px;
      }

      .king li.current .big {
        display: block;
      }

      .king li.current .small {
        display: none;
      }

      .big {
        width: 224px;
        display: none;
      }

      .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
      // 入口函数
      $(function () {
        $(".king li").mouseenter(function () {
          $(this)
            .stop()
            .animate({
              width: 224
            })
            .find(".small")
            .stop()
            .fadeOut()
            .next()
            .stop()
            .fadeIn();

          $(this)
            .siblings("li")
            .stop()
            .animate({
              width: 69
            })
            .find(".small")
            .stop()
            .fadeIn()
            .next()
            .stop()
            .fadeOut();
        });
      });
    </script>
    <div class="king">
      <ul>
        <li class="current">
          <a href="#">
            <img src="images/m1.jpg" alt="" class="small" />
            <img src="images/m.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/l1.jpg" alt="" class="small" />
            <img src="images/l.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/c1.jpg" alt="" class="small" />
            <img src="images/c.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/w1.jpg" alt="" class="small" />
            <img src="images/w.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/z1.jpg" alt="" class="small" />
            <img src="images/z.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/h1.jpg" alt="" class="small" />
            <img src="images/h.png" alt="" class="big" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/t1.jpg" alt="" class="small" />
            <img src="images/t.png" alt="" class="big" />
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
